<template>
  <div>
    <headerc :title="title"></headerc>
    <div class="c-main-make">
      <!-- <div class="title-text">数据筛选</div> -->
      <div style="padding: 40px">
        <el-form :inline="true" :model="filterForm" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="filterForm.postName"
              placeholder="职务名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="query"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reset">清除查询条件</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button
              v-auth="'E02001'"
              type="primary"
              @click="goCreatePosition"
              >新建职务</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-table
        :data="positionList"
        border
        :header-cell-style="{ background: '#F6F7FB' }"
      >
        <el-table-column label="职务名称">
          <template slot-scope="scope">
            <p>{{ scope.row.postName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{row}">
            <p v-if="row.status == 0">禁用</p>
            <p v-if="row.status == 1">启用</p>
          </template>
        </el-table-column>
        <el-table-column label="成员数量">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click="goStaff(scope.row)">{{
              scope.row.membersNum
            }}</a>
          </template>
        </el-table-column>
        <el-table-column label="职务描述">
          <template slot-scope="scope">
            <p>{{ scope.row.description }}</p>
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            <p>{{ scope.row.updateTime }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="500">
          <template slot-scope="scope">
            <el-button
              v-auth="'E02004'"
              size="mini"
              @click="setAuthority(scope.row.id)"
              >设置权限</el-button
            >
            <el-button
              v-auth="'E02002'"
              size="mini"
              @click="goUpdatePositon(scope.row)"
              >编辑职务</el-button
            >
            <el-button
              v-auth="'E02005'"
              size="mini"
              @click="goAddUser(scope.row)"
              >添加人员</el-button
            >
            <el-button
              v-auth="'E02006'"
              size="mini"
              @click="
                dialogVisible3 = true
                positionRow = scope.row
              "
              >设置状态</el-button
            >
            <el-button
              v-auth="'E02003'"
              size="mini"
              type="danger"
              @click="deletePosition(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="isUpdate"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        :hide-on-single-page="total < 10"
        @current-change="currentChange"
        class="pagination"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="positionTitle"
      :visible.sync="dialogVisible"
      @close="cancelCreatePosition"
      width="50%"
    >
      <el-form
        ref="positionForm"
        :model="positionForm"
        :rules="positionRules"
        label-width="100px"
      >
        <el-form-item label="职务名称:" prop="postName">
          <el-input
            v-model="positionForm.postName"
            placeholder="输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="职务描述:">
          <el-input
            v-model="positionForm.description"
            type="textarea"
            :rows="4"
            placeholder="输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelCreatePosition">取 消</el-button>
        <el-button v-if="!isUpdate" type="primary" @click="createPosition"
          >确 定</el-button
        >
        <el-button v-if="isUpdate" type="primary" @click="updatePosition"
          >编 辑</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="添加人员"
      :visible.sync="dialogVisible2"
      @close="cancel2"
      width="50%"
    >
      <el-form
        ref="userForm"
        :model="userForm"
        :rules="userFormRules"
        label-width="100px"
      >
        <el-form-item label="职务名称:" prop="postName">
          <el-input v-model="userForm.postName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="选择成员:" prop="emplName">
          <el-select
            v-model="userForm.emplName"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in postNameOptions"
              :key="item.value"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel2">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="设置状态"
      :visible.sync="dialogVisible3"
      @close="cancel3"
      width="50%"
    >
      <el-form
        ref="statusForm"
        :model="statusForm"
        :rules="statusRules"
        label-width="100px"
      >
        <el-form-item label="状态选择:" prop="status">
          <el-radio-group
            v-model="statusForm.status"
            size="medium"
            @change="changeStatus"
          >
            <el-radio border label="1">启用</el-radio>
            <el-radio border label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注内容:" prop="remark">
          <el-input
            v-model="statusForm.remark"
            type="textarea"
            :rows="4"
            placeholder="输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel3">取 消</el-button>
        <el-button type="primary" @click="updateStatus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import headerc from '@/components/header.vue'
import { getlist } from '@/api'
import {
  positionList,
  deletePosition,
  updatePositionStatus,
  createPosition,
  updatePosition,
  updateUserPro,
} from '@/api/permission'
export default {
  components: {
    headerc
  },
  data() {
    return {
      isUpdate: true,
      title: '职务管理',
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      isUpdate: false,
      positionTitle: '',
      addJob: {
        jobName: '',
        description: '',
        remark: ''
      },
      addPeople: {
        jobName: '销售总监',
        choosePeople: ''
      },
      setStates: {
        chooseState: [],
        remakes: ''
      },
      statusForm: {
        status: '1',
        remake: ''
      },
      jobList: [
        {
          jobName: '班组长',
          isState: '启用',
          memberNum: '100',
          jobDes: '暂无相关描述',
          updateTime: '2016-05-02'
        }
      ],
      positionId: '',
      pageNo: 1, // 分页页码
      pageSize: 10, // 每页条数
      total: 0,
      positionList: [],
      statusRow: '',
      positionRow: {},
      filterForm: {
        postName: '',
      },
      positionForm: {
        postName: '',
        description: ''
      },
      userForm: {
        postName: '',
        emplName: '',
      },
      userFormRules: {
        emplName: [{ required: true, message: '请选择成员', trigger: 'blur' }],
      },
      statusRules: {
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        remark: [{ required: true, message: '请填写备注', trigger: 'blur' }]
      },
      positionRules: {
        postName: [
          { required: true, message: '请填写职务名称', trigger: 'blur' }
        ]
      },
      postNameOptions: [],
      loading: false,
    }
  },
  created() {
    this.getPositionList()
  },
  methods: {
    goStaff(row) {
      this.$router.push({
        path: '/permission/staff',
        query: {
          positionId: row.id,
          postName: row.postName,
        },
      })
    },
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = false
        const res = await getlist({
          emplName: query
        })
        if (res.code == 200) {
          this.loading = false
          this.postNameOptions = res.data
        }
      } else {
        this.options = []
      }
    },
    async addUser() {
      const res = await updateUserPro([
        {
          id: this.userForm.emplName,
          positionId: this.positionRow.id,
        },
      ])
      if (res.code == 200) {
        this.dialogVisible2 = false
        this.$message({
          type: 'success',
          message: '添加人员成功',
        })
        this.getPositionList()
      }
    },
    goAddUser(row) {
      this.dialogVisible2 = true
      this.positionRow = row
      this.userForm.postName = row.postName
    },
    goCreatePosition() {
      this.dialogVisible = true
      this.isUpdate = false
      this.positionTitle = '新建职务'
    },
    changeStatus(val) {
      this.statusForm.status = val
    },
    goUpdatePositon(row) {
      this.isUpdate = true
      this.positionTitle = '编辑职务'
      this.dialogVisible = true
      this.positionRow = row
      this.positionForm.postName = row.postName
      this.positionForm.description = row.description
    },
    async updatePosition() {
      this.$refs.positionForm.validate(async (valid) => {
        if (valid) {
          const res = await updatePosition({
            id: this.positionRow.id,
            postName: this.positionForm.postName,
            remark: this.positionForm.description
          })
          if (res.code == 200) {
            this.$refs.positionForm.resetFields()
            this.positionForm.description = ''
            this.$message({
              type: 'success',
              message: res.message
            })
            this.dialogVisible = false
            this.getPositionList()
          }
        } else {
          return false
        }
      })
    },
    async createPosition() {
      this.$refs.positionForm.validate(async (valid) => {
        if (valid) {
          const res = await createPosition({
            code: '',
            creatorId: '11',
            description: this.positionForm.description,
            postName: this.positionForm.postName
          })
          if (res.code == 200) {
            this.$refs.positionForm.resetFields()
            this.positionForm.description = ''
            this.$message({
              type: 'success',
              message: res.message
            })
            this.dialogVisible = false
            this.getPositionList()
          }
        } else {
          return false
        }
      })
    },
    // async updatePosition() {
    //   const res = await updatePosition()
    //   console.log('res', res)
    // },
    async updateStatus(postName) {
      this.$refs.statusForm.validate(async (valid) => {
        if (valid) {
          const res = await updatePositionStatus({
            id: this.positionRow.id,
            postName: this.statusRow.postName,
            remark: this.statusForm.remark,
            status: this.statusForm.status
          })
          if (res.code == 200) {
            this.dialogVisible3 = false
            this.$message({
              type: 'success',
              message: '状态设置成功'
            })
            this.getPositionList()
          }
          console.log('res', res)
        } else {
          return false
        }
      })
    },
    async deletePosition(id) {
      this.$confirm('是否确定删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deletePosition(id)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getPositionList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    reset() {
      this.filterForm.postName = ''
    },
    query() {
      this.pageNo = 1
      this.isUpdate = false
      this.getPositionList()
    },
    currentChange(pageNo) {
      this.pageNo = pageNo
      this.getPositionList()
    },
    async getPositionList() {
      const res = await positionList({
        postName: this.filterForm.postName,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      if (res.code == 200) {
        this.isUpdate = true
        this.positionList = res.data.list
        this.total = res.data.total
      }
    },
    cancelCreatePosition() {
      this.dialogVisible = false
      this.$refs.positionForm.resetFields()
    },
    cancel2() {
      this.dialogVisible2 = false
      this.$refs.userForm.resetFields()
    },
    cancel3() {
      this.dialogVisible3 = false
      this.$refs.setStates.resetField()
    },
    cancel4() {
      this.dialogVisible4 = false
    },
    setAuthority(id) {
      this.$router.push({
        path: 'jobset',
        query: {
          id
        }
      })
      // this.$router.push('jobset')
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    deleteSure() {
      this.dialogVisible4 = false
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-main-make {
  margin-left: 35px;
  min-height: 300px;
  background: #fff;
  margin-right: 35px;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.c-main-show {
  margin-left: 35px;
  min-height: 700px;
  background: #fff;
  margin-right: 35px;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.title-text {
  width: 100%;
  height: 50px;
  border-bottom: 1px #dcdee0 solid;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', 微软雅黑, sans-serif;
  font-weight: 700;
  color: #666666;
  line-height: 50px;
  padding-left: 25px;
}

.pagination {
  display: flex;
  justify-content: end;
}
</style>
